.page {
	transition: all 0.2s;
	opacity: 1;
	height: 100vh;
	background-color: #f8f8f8;
}

.bg-color {
	width: 100%;
	height: 75%;
	// height: 686rpx;
	position: fixed;
	top: 0;
	left: 0;
}
.contnet-box {
	position: relative;
	z-index: 10;
	width: 100%;
	.data-box {
		width: 690rpx;
		height: 300rpx;
		margin: 30rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx 36rpx;
		box-sizing: border-box;
		.title {
			font-weight: 600;
			font-size: 32rpx;
			color: #1b2431;
		}
		.label-box {
			width: 100%;
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			
			::v-deep .vue-ref{
				margin-right: 15rpx;
			}
			.label-item {
				padding: 5rpx 10rpx;
				border-radius: 6rpx;
				font-weight: 400;
				font-size: 22rpx;
				margin-right: 20rpx;
			}
			.color1 {
				color: #e7d330;
				background: rgba(231, 211, 48, 0.15);
			}
			.color2 {
				color: #3b75ff;
				background: rgba(59, 117, 255, 0.15);
			}
			.color3 {
				color: #58ae43;
				background: rgba(88, 174, 67, 0.15);
			}
		}
		.flex-box {
			width: 100%;
			display: flex;
			align-items: center;
		}
		.object-box-item {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.object-box-item-title {
				font-weight: 400;
				font-size: 26rpx;
				color: #C5C5C5;
				margin-right: 10rpx;
			}
			.object-box-item-desc {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #1b2431;
			}
		}
	}
	.scroll-view-box {
		width: 100%;
		background: #f8f8f8;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 24rpx;
		box-sizing: border-box;
		min-height: 300rpx;
		.box-box {
			width: 100%;
			.tab-box {
				width: 100%;
				margin: 30rpx 0;
			}
			// 验收
			.tips-box {
				padding: 0 30rpx 30rpx;
				display: flex;
				align-items: center;

				.icon {
					width: 8rpx;
					height: 24rpx;
					border-radius: 2rpx;
					background-color: #3b75ff;
				}

				.title {
					font-size: 28rpx;
					color: #000;
					margin: 0 10rpx;
				}

				::v-deep .uniui-help {
					font-size: 40rpx !important;
					margin-right: 10rpx;
				}
			}
			.tab-item-box {
				width: 100%;
				background-color: #ffffff;
				padding: 0 30rpx;
				box-sizing: border-box;
				border-radius: 16rpx;
				position: relative;
				
				.copy-btn {
					width: 100%;
					height: 92rpx;
					background: #ffffff;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #1b2431;
					position: absolute;
					bottom: -130rpx;
					left: 0;
					.icon-ic_line_copy24px {
						color: #1b2431;
						font-size: 32rpx;
						margin-right: 10rpx;
					}
				}
				.tab-item-box-item {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 25rpx 0;
					border-bottom: 1rpx solid #ebf3f8;
					&:last-child {
						border: none;
					}
					.tab-item-box-item-title {
						font-weight: 400;
						font-size: 28rpx;
						color: #828A9D;
					}
					.wrap{
						flex-direction: column;
						align-items: flex-end !important;
					}
					.tab-item-box-item-right-box {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						padding-left: 20rpx;
						flex: 1;
						
						.file-box{
							display: flex;
							flex-wrap: wrap;
							justify-content: flex-end;
							flex: 1;
							
							.file-img{
								width: 60rpx;
								height: 60rpx;
								border-radius: 8rpx;
								margin: 5rpx;
								border: solid 1rpx #e6e6e6;
							}
						}
						.tab-item-box-item-right-box-avater {
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}
						.tab-item-box-item-right-box-name {
							font-weight: 400;
							font-size: 28rpx;
							color: #1b2431;
							margin-right: 10rpx;
						}
						.tab-item-box-item-right-box-file {
							font-weight: 400;
							font-size: 28rpx;
							color: #3B75FF;
							text-decoration: underline;
							width: 450rpx;
							word-wrap: break-word;
							word-break: break-all;
							text-align: right;
							margin-bottom: 10rpx;
							
							&:last-child{
								margin-bottom: 0;
							}
						}
						.icon-dianhua {
							color: #d8d8d8;
							font-size: 30rpx;
						}
					}
				}
				// 报价
				.bj-child-box{
					margin-bottom: 20rpx;
					padding: 20rpx;
					background-color: #F5F8FE;
					border-radius: 8rpx;
					
					.bj-cell{
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						&:first-child{
							margin-top: 0;
						}
						.bj-label{
							color: #828A9D;
							font-size: 26rpx;
							margin-right: 20rpx;
						}
						.bj-desc{
							color: #1B2431;
							font-size: 26rpx;
						}
					}
				}
				// 增减项
				.zjx-item{
					padding: 30rpx;
					background-color: #fff;
					// box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(208, 208, 208, 0.34);
					border-radius: 16rpx;
					position: relative;
					margin-bottom: 30rpx;
					
					
					.zjx-cell{
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						
						&:first-child{
							margin-top: 0;
						}
						
						.zjx-label{
							color: #828A9D;
							font-size: 26rpx;
							margin-right: 20rpx;
						}
						.zjx-desc{
							color: #1B2431;
							font-size: 26rpx;
						}
						.flex{
							display: flex;
							align-items: center;
						}
						.link{
							color: #3B75FF;
							text-decoration-line: underline;
						}
					}
					
					.child-box{
						margin-top: 20rpx;
						padding: 20rpx;
						background-color: #F5F8FE;
						border-radius: 8rpx;
					}
				}
				// 付款记录
				.payment-item2{
					padding: 30rpx;
					background-color: #fff;
					// box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(208, 208, 208, 0.34);
					border-radius: 16rpx;
					margin-bottom: 30rpx;
					border: 2rpx solid #C9D9FF;
					
					.row-cell{
						margin-top: 20rpx;
						display: flex;
						
						&:first-child{
							margin-top: 0;
						}
						
						.row-cell-label{
							width: 170rpx;
							color: #828A9D;
							font-size: 26rpx;
						}
						.row-cell-desc{
							width: calc(100% - 170rpx);
							color: #1B2431;
							font-size: 26rpx;
						}
						.flex-between{
							display: flex;
							
							.title{
								width: calc(100% - 132rpx);
							}
							.copy{
								font-size: 24rpx;
								width: 132rpx;
								display: flex;
								color: #3b75ff;
								
								.icon-ic_line_copy24px{
									color: #3b75ff;
								}
							}
						}
					}
				}
				.payment-item {
					padding: 30rpx;
					background-color: #fff;
					// box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(208, 208, 208, 0.34);
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					position: relative;
					margin-bottom: 30rpx;
					overflow: hidden;

					.payment-state {
						position: absolute;
						right: 10rpx;
						top: 10rpx;
						
						img{
							width: 130rpx;
							height: 130rpx;
							opacity: 0.5;
						}
					}

					.image-box {
						width: 136rpx;
						height: 136rpx;
						border-radius: 12rpx;
						border: solid 2rpx #f8f8f8;
						overflow: hidden;
						margin-right: 30rpx;
						position: relative;

						image {
							width: 100%;
							height: 100%;
						}
						
						.more{
							position: absolute;
							top: 0;
							left: 0;
							background-color: rgba(17, 17, 17, 0.4);
							width: 100%;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 40rpx;
							color: #ffffff;
							
							span{
								margin-right: 5rpx;
							}
						}
					}

					.payment-content-box {
						flex: 1;

						.content-item:last-child {
							margin-bottom: 0;
						}

						.content-item {
							display: flex;
							font-size: 26rpx;
							margin-bottom: 20rpx;

							.label {
								color: #828A9D;
								width: 120rpx;
							}

							.desc {
								flex: 1;
								color: #4a4d52;
							}
						}
					}
				}
				
				// 评分
				.score-item{
					background-color: #fff;
					border-radius: 16rpx;
					position: relative;
					padding: 30rpx 0;
					
					.score-cell{
						display: flex;
						justify-content: space-between;
						margin-top: 20rpx;
						
						&:first-child{
							margin-top: 0;
						}
						
						.score-label{
							color: #828A9D;
							font-size: 26rpx;
						}
					}
				}
				
				// 施工记录
				.sgjl-item {
					padding: 30rpx;
					padding-bottom: 15rpx;
					background-color: #fff;
					// box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(208, 208, 208, 0.34);
					border-radius: 16rpx;
					margin-bottom: 30rpx;
				
					.sgjl-content-box {
				
						// .content-item:last-child {
						// 	margin-bottom: 0;
						// }
				
						.content-item{
							display: flex;
							align-items: center;
							font-size: 26rpx;
							margin-bottom: 20rpx;
				
							.label {
								color: #828A9D;
								width: 120rpx;
							}
				
							.desc {
								flex: 1;
								text-align: right;
								color: #4a4d52;
							}
							
							.file-box{
								flex: 1;
								display: flex;
								align-items: flex-end;
								flex-direction: column;
								
								.file-desc{
									color: #3B75FF;
									text-decoration-line: underline;
									text-align: right;
								}
							}
						}
						.content-item2{
							font-size: 26rpx;
							
							.label {
								color: #828A9D;
								margin-bottom: 10rpx;
							}
							
							.file-box{
								display: flex;
								flex-wrap: wrap;
								flex: 1;
								
								.file-img{
									width: 90rpx;
									height: 90rpx;
									border-radius: 8rpx;
									margin-right: 15rpx;
									margin-bottom: 15rpx;
									border: solid 1rpx #e6e6e6;
								}
							}
							
							
						}
					}
				}
				
				// 工程验收
				.gcys-box{
					padding: 30rpx;
					padding-bottom: 15rpx;
					background-color: #fff;
					// box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(208, 208, 208, 0.34);
					border-radius: 16rpx;
					position: relative;
					margin-bottom: 30rpx;
					
					.title-box{
						display: flex;
						margin-bottom: 30rpx;
						
						.gcys-title{
							font-size: 32rpx;
							font-weight: 500;
							margin-right: 20rpx;
							flex: 1;
						}
					}
					
					.gcys-cell{
						margin-bottom: 30rpx;
						
						.gcys-label{
							color: #828A9D;
							font-size: 26rpx;
							margin-right: 20rpx;
						}
						.gcys-desc{
							width: 100%;
							color: #1B2431;
							font-size: 26rpx;
							margin-top: 10rpx;
						}
						.gcys-file{
							margin-top: 10rpx;
							display: flex;
							flex-wrap: wrap;
							width: 100%;
							
							.file-img{
								width: 90rpx;
								height: 90rpx;
								border-radius: 8rpx;
								margin-right: 15rpx;
								margin-bottom: 15rpx;
								border: solid 1rpx #e6e6e6;
							}
							.null-desc{
								color: #1B2431;
								font-size: 26rpx;
							}
						}
					}
				}
			}
		}
	}
}

::v-deep .uv-tabs__wrapper__nav__line{
	bottom: 0rpx !important;
}

.bottom-box {
	width: 100%;
	background: #ffffff;
	border-top: 2rpx solid rgba(177, 177, 177, 0.2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 20rpx;
	box-sizing: border-box;
	
	.tips{
		margin-bottom:30rpx;
		font-size: 26rpx;
		color: #828A9D;
	}
	.btns{
		display: flex;
		margin-bottom:30rpx;
	}
	::v-deep .uv-button-wrapper {
		margin: 0 5rpx;
	}
}
.empty-box{
	width: 100%;
	height: 400rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	
	.empty-img{
		width:300rpx;
		height: 300rpx;
	}
	.empty-desc{
		font-size: 26rpx;
		color: #c0c4cc;
		margin-top: 20rpx;
	}
}


// .bg{
// 	background-color: #f8f8f8;
// 	width: 100%;
// 	height: 800rpx;
// 	position: fixed;
// 	left: 0;
// 	bottom: 0;
// }